<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="补贴奖励明细"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <view class="content">
      <!-- 搜索框 -->
      <view class="search-box">
        <uni-easyinput
          v-model="searchKeyword"
          placeholder="请输入订单编号"
          prefixIcon="search"
          :clearable="true"
        >
          <template #right>
            <view class="search-btn" @click="handleSearch">搜索</view>
          </template>
        </uni-easyinput>
      </view>

      <!-- 订单列表 -->
      <view class="order-list">
        <view
          v-for="(item, index) in orderList"
          :key="index"
          class="order-item"
          @click="goToSubsidyRewardInfo(item)"
        >
          <!-- 活动标签 -->
          <view v-if="item.activityTag" class="activity-tag">
            {{ item.activityTag }}
          </view>

          <view class="order-row">
            <text class="label">下单时间：</text>
            <text class="value">{{ item.orderTime }}</text>
          </view>

          <view class="order-row">
            <text class="label">订单编号：</text>
            <text class="value">{{ item.orderNumber }}</text>
          </view>

          <view class="order-row">
            <text class="label">订单金额：</text>
            <text class="value amount">¥ {{ item.amount }}</text>
          </view>

          <view class="order-row split">
            <view class="row-item">
              <text class="label">积分：</text>
              <text class="value">{{ item.points }}</text>
            </view>
            <view class="row-item">
              <text class="label">本期收入抵用券：</text>
              <text class="value highlight">{{ item.couponIncome }}</text>
            </view>
          </view>
        </view>

        <!-- 空状态 -->
        <view v-if="orderList.length === 0" class="empty-state">
          <image
            src="/static/logo.png"
            class="empty-image"
            mode="aspectFit"
          ></image>
          <text class="empty-text">暂无数据~</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

// 搜索关键词
const searchKeyword = ref("");

// 订单列表
const orderList = ref([
  {
    activityTag: "平台奖励活动",
    orderTime: "2025-04-03 10:13:53",
    orderNumber: "190761752291039235O",
    amount: "17.50",
    points: "3.50",
    couponIncome: "0.0147",
  },
  {
    activityTag: "平台奖励活动",
    orderTime: "2025-04-15 09:42:47",
    orderNumber: "191195834942686824G",
    amount: "111.00",
    points: "22.20",
    couponIncome: "0.0809",
  },
  {
    activityTag: "平台奖励活动",
    orderTime: "2025-01-03 21:43:16",
    orderNumber: "187517610379061659S",
    amount: "7.00",
    points: "1.40",
    couponIncome: "0.0136",
  },
  {
    activityTag: "平台奖励活动",
    orderTime: "2024-12-17 22:53:23",
    orderNumber: "186903315593286456S",
    amount: "2.00",
    points: "0.40",
    couponIncome: "0.0051",
  },
]);

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 跳转到补贴奖励详情页面
const goToSubsidyRewardInfo = (item) => {
  console.log("查看订单详情:", item);
  // TODO: 可以通过 URL 参数传递订单信息
  uni.navigateTo({
    url: `/pages/index/couponDetails/subsidyRewardInfo?orderNumber=${item.orderNumber}`,
  });
};

// 搜索
const handleSearch = () => {
  console.log("搜索关键词:", searchKeyword.value);
  // TODO: 调用接口搜索
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 32rpx;
  padding-top: 20rpx;
}

// 搜索框
.search-box {
  margin-bottom: 24rpx;

  :deep(.uni-easyinput) {
    background-color: #fff;
    border-radius: 50rpx;
    overflow: hidden;
  }

  :deep(.uni-easyinput__content) {
    background-color: #fff;
    border-radius: 50rpx;
  }

  :deep(.uni-easyinput__content-input) {
    font-size: 28rpx;
    height: 72rpx;
  }

  .search-btn {
    padding: 0 32rpx;
    height: 72rpx;
    line-height: 72rpx;
    background: linear-gradient(135deg, #ffd000 0%, #ff9500 100%);
    color: #fff;
    font-size: 28rpx;
    border-radius: 0 50rpx 50rpx 0;
    white-space: nowrap;

    &:active {
      opacity: 0.8;
    }
  }
}

// 订单列表
.order-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.order-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  position: relative;
  overflow: hidden;
  cursor: pointer;

  &:active {
    background-color: #f9f9f9;
  }
}

// 活动标签
.activity-tag {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8rpx 24rpx;
  background-color: #ff9500;
  color: #fff;
  font-size: 24rpx;
  border-radius: 0 16rpx 0 16rpx;
}

.order-row {
  display: flex;
  align-items: flex-start;
  padding: 12rpx 0;

  &.split {
    flex-direction: column;
    gap: 12rpx;
    padding-top: 16rpx;
  }

  .label {
    font-size: 28rpx;
    color: #666;
    flex-shrink: 0;
  }

  .value {
    font-size: 28rpx;
    color: #333;
    flex: 1;
    word-break: break-all;

    &.amount {
      font-weight: 600;
    }

    &.highlight {
      color: #ff9500;
      font-weight: 600;
    }
  }
}

.row-item {
  display: flex;
  align-items: center;

  .label {
    font-size: 28rpx;
    color: #666;
  }

  .value {
    font-size: 28rpx;
    color: #333;
    margin-left: 8rpx;

    &.highlight {
      color: #ff9500;
      font-weight: 600;
    }
  }
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.empty-image {
  width: 300rpx;
  height: 300rpx;
  margin-bottom: 32rpx;
  opacity: 0.3;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>
